import React, {useEffect, useCallback, useState} from "react";

/**
 * useMemo：
 *     1. 返回一个 memoized 值。
 *     2. 把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。
 *     3. 传入 useMemo 的函数会在渲染期间执行。不要在这个函数内部执行与渲染无关的操作。
 *     4. 先编写在没有 useMemo 的情况下也可以执行的代码 —— 之后再在你的代码中添加 useMemo，以达到优化性能的目的。
 *
 * 注意：
 *     1. 依赖项数组不会作为参数传给“创建”函数。
 *     2. 未来编译器会更加智能，届时自动创建数组将成为可能。
 */
export function HookTest6() {
    // eslint-disable-next-line no-unused-vars
    const [query, setQuery] = useState('react');

    const getFetchUrl = useCallback((query) => {
        return 'https://hn.algolia.com/api/v1/search?query=' + query;
    }, [query]);

    useEffect(() => {
        // eslint-disable-next-line no-unused-vars
        const url = getFetchUrl();
    }, [getFetchUrl]);

    useEffect(() => {
        // eslint-disable-next-line no-unused-vars
        const url = getFetchUrl();
    }, [getFetchUrl]);

    return (
        <div>...</div>
    );
}
